<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="resetform"
          label-width="80px"
          :model="form"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="运单编号:"
                style="margin-bottom: 10px"
                label-width="110px"
              >
                <el-input
                  v-model="form.id"
                  placeholder="请输入运单编号"
                  size="small"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-model="form.status"
                label="订单状态"
                style="margin-bottom: 10px"
                label-width="110px"
              >
                <el-select
                  :value="orderStatusName"
                  clearable
                  placeholder="请选择"
                  size="small"
                  @change="(e)=>{
                    orderStatusName=orderStatusArr.find(item=>item.id===e).name
                  }"
                >
                  <!-- @change="orderStatusArrChange" -->
                  <el-option
                    v-for="item in orderStatusArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="付费状态:"
                style="margin-bottom: 10px"
                label-width="110px"
              >
                <el-select
                  :value="paymentStatusName"
                  clearable
                  placeholder="请选择"
                  size="small"
                  @change="(e)=>{
                    paymentStatusName=paymentStatus.find(item=>item.id==e).name
                  }"
                >
                  <el-option
                    v-for="item in paymentStatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人姓名:"
                style=" margin-bottom: 10px"
                label-width="110px"
              >
                <el-input
                  v-model="form.senderName"
                  placeholder="请输入发件人姓名"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人电话:"
                style="margin-bottom: 10px"
                label-width="110px"
              >
                <el-input
                  v-model="form.senderPhone"
                  placeholder="请输入发件人电话"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
            >
              <el-form-item
                label="发件人地址："
                style=" margin-bottom: 10px"
                label-width="110px"
              >
                <el-col
                  :span="8"
                  style="padding: 0"
                >
                  <el-select
                    :value="org.province !== null ? org.province.id : ''"
                    placeholder="请选择省"
                    value-key="id"
                    clearable

                    @change="getCity($event, true,org)"
                  >
                    <el-option
                      v-for="item in org.provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col
                  :span="8"
                  style="padding: 0 4px"
                >
                  <el-select
                    :value="org.city !== null ? org.city.id : ''"
                    value-key="id"
                    clearable
                    placeholder="请选择市"

                    @change="getCounty($event, true,org)"
                  >
                    <el-option
                      v-for="item in org.cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col
                  :span="8"
                  style="padding: 0"
                >
                  <el-select
                    :value="org.county !== null ? org.county.id : ''"
                    value-key="id"
                    clearable
                    placeholder="请选择县/区"

                    @change="getCurrent($event,org)"
                  >
                    <el-option
                      v-for="item in org.countryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>

                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人姓名:"
                style=" margin-bottom: 10px"
                label-width="110px"
              >
                <el-input
                  v-model="form.receiverName"
                  placeholder="请输入收件姓名"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人电话:"
                style="margin-bottom: 10px"
                label-width="110px"
              >
                <el-input
                  v-model="form.receiverPhone"
                  placeholder="请输入收件人电话"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
            >
              <el-form-item
                label="收件人地址："
                style=" margin-bottom: 10px"
                label-width="110px"
              >
                <el-col
                  :span="8"
                  style="padding: 0"
                >
                  <el-select
                    :value="address.province !== null ? address.province.id : ''"
                    placeholder="请选择省"
                    value-key="id"
                    clearable
                    @change="getCity($event, true,address)"
                  >
                    <el-option
                      v-for="item in address.provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col
                  :span="8"
                  style="padding: 0 4px"
                >
                  <el-select
                    :value="address.city !== null ? address.city.id : ''"
                    value-key="id"
                    clearable
                    placeholder="请选择市"

                    @change="getCounty($event, true,address)"
                  >
                    <el-option
                      v-for="item in address.cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col
                  :span="8"
                  style="padding: 0"
                >
                  <el-select
                    :value="address.county !== null ? address.county.id : ''"
                    value-key="id"
                    clearable
                    placeholder="请选择县/区"
                    @change="getCurrent($event,address)"
                  >
                    <el-option
                      v-for="item in address.countryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>

                </el-col>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="padding-left: 50px"
            >
              <el-button
                type="warning"
                size="small"
                @click="handleFilter"
                @select="selectAgency"
              >
                搜索</el-button>
              <el-button
                class="reset-btn"
                size="small"
                @click="resetForm"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card style="margin-top: 20px;">
        <el-table
          :data="list"
          fit
          stripe

          style="width: 100%"
        >
          <el-table-column
            fixed
            type="index"
            :index="indexMethod"
            label="序号"
            width="70"
          >
          </el-table-column>
          <el-table-column
            prop="id"
            label="订单编号"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="transportOrder.id"
            label="运单编号"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="senderName"
            label="发件人名字"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="receiverPhone"
            label="发件人电话"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="senderPhone"
            label="收件人电话"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="senderAddress"
            label="收件人地址"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="pickupType"
            label="取件类型"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="paymentMethod"
            label="付费类型"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="paymentStatus"
            label="付费状态"
            width="100"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleClick(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination

            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { orderStatusArr } from '@/api/orderstatus'
import { areaList } from '@/api/common' // 地区
import { orderStatus, pickupType, paymentMethod, paymentStatus } from '@/api/constant'
import { orderList } from '@/api/order'
export default {
  data() {
    return {
      paymentStatusName: '',
      orderStatusName: '',
      list: [],
      form: {
        id: '',
        page: 1,
        pageSize: 10,
        // 订单状态
        status: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: ''
      },
      page: 1,
      pageSize: 10,
      total: null,
      // 运单编号
      wayBillIpt: '',
      // 订单状态
      orderStatusArr,
      // 付费状态
      paymentStatus,

      // 机构信息数据
      org: this.initOrg(),
      // 收货地址
      address: this.initOrg(),
      // 省级中心id
      provincialCenterId: '',
      // 省级树形默认展开中心id
      provincialCenterId2: [],
      // 城市id
      countyId: '',
      searchkey: false
    }
  },
  // 重新渲染
  created() {
    this.getOrderList()
    this.getProvince(this.org)
    this.getProvince(this.address)
  },
  methods: {

    initOrg() {
      this.countyId = ''
      return {
        id: '',
        name: '',
        type: '',
        address: '',
        managerName: '',
        provinceId: '',
        // 省列表
        provinceList: [],
        // 市列表
        cityList: [],
        // 县区列表
        countryList: [],
        cityId: '',
        countyId: '',
        phone: '',
        parentId: 0,
        latitude: '',
        longitude: '',
        county: {
          id: ''
        },
        province: {
          id: ''
        },
        city: {
          id: ''
        }
      }
    },
    orderStatusArrChange(e) {
      this.orderStatusName = orderStatusArr.find(item => item.id === e).name
    },
    // 重置功能
    resetForm() {
      this.$refs.resetform.resetFields()
      this.form = {
        id: '',
        page: 1,
        pageSize: 10,
        status: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: ''
      }
      this.getOrderList()
    },
    // 获取列表
    async getOrderList() {
      const { data } = await orderList({ page: this.page, pageSize: this.pageSize })
      // console.log(items)
      this.total = data.counts
      this.list = data.items
      // 枚举
      this.list.forEach(item => {
        // 订单状态
        const res = orderStatus.find(x => x.id === item.status)
        item.status = res ? res.name : ''
        // 取件状态
        const res1 = pickupType.find(x => x.id === item.pickupType)
        item.pickupType = res1 ? res1.name : ''
        // 付费类型
        const res2 = paymentMethod.find(x => x.id === item.paymentMethod)
        item.paymentMethod = res2 ? res2.name : ''
        // 付费状态
        const res3 = paymentStatus.find(x => x.id === item.paymentStatus)
        item.paymentStatus = res3 ? res3.name : ''
      },

      )
    },
    // 获取省信息
    getProvince(obj) {
      // areaList({ parentId: val }).then((response) => {
      areaList().then((response) => {
        obj.provinceList = response.data
        console.log(response)
      })
    },
    // 获取市信息，获取到省的信息后才能进行，因此需要绑定在省上
    getCity(val, isClear, obj) {
      areaList({ parentId: val }).then((response) => {
        obj.cityList = response.data
        obj.province.id = val
        if (isClear) {
          obj.city.id = ''
          this.countyId = ''
        }
      })
    },
    // 获取县区信息，获取到市之后才能够继续进行，因此事件需要绑定在市上
    getCounty(val, isClear, obj) {
      areaList({ parentId: val }).then((response) => {
        obj.countryList = response.data
        obj.city.id = val
        if (isClear) {
          this.countyId = ''
        }
      })
    },
    // 获取当前的数据id
    getCurrent(val, obj) {
      obj.county.id = val
      this.countyId = val
    },
    handleClick(row) {
      this.$router.push({
        path: '/business/edit-order',
        query: {

          id: row.id
          // name: 'row.name'
        }
      })
    },
    // 页码变化时，触发的事件
    handleCurrentChange(val) {
      this.page = val
      this.getOrderList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      if (this.page === 1) {
        this.getOrderList(this.list)
      }
    },
    indexMethod(index) {
      return (this.page - 1) * this.pageSize + index + 1
    },
    // 确认按钮
    async handleFilter() {
      this.page = 1
      const { data } = await orderList(this.form)
      console.log(this.form)
      this.list = data.items
      this.searchkey = true
    },
    selectAgency(val) {
      this.list.id = val.id
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 20px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table{
  font-size: 12px;
}
.el-table th {
  font-size: 12px;
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
